<template>
    <div>
        <h1>显示用户房间信息</h1>
        用户姓名 <input type="text" v-model="Page.Name">
        手机号 <input type="text" v-model="Page.Phone">
        <input type="button" value="查询" @click="Show">
        <table class="table">
            <thead>
                <tr>
                <th>用户编号</th>
                <th>用户姓名</th>
                <th>手机号</th>
                <th>房型</th>
                <th>图片路径</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="a in data">
                <th>{{a.Id}}</th>
                <th>{{a.Name}}</th>
                <th>{{a.Phone}}</th>
                <th>{{a.TypeName}}</th>
                <th>{{a.img}}</th>
                <th>{{a.State?"上架":"下架"}}</th>
                <th>
                    <a :href="'https://localhost:7119/'+a.img" width="100" height="100">查看图片</a>
                    <input type="button" value="删除" @click="Del(a.Id,a.isDel)">
                    <input type="button" value="修改" @click="Upd(a.Id)">
                </th>
            </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="Fanye(1)">
        <input type="button" value="上一页" @click="Fanye(Page.PageIndex-1)">
        <input type="button" value="下一页" @click="Fanye(Page.PageIndex+1)">
        <input type="button" value="尾页" @click="Fanye(Total.TotalPage)">
        当前第{{Page.PageIndex}}页 共{{Total.TotalPage}}页 共{{Total.TotalCount}}行
        页容量 <select v-model="Page.PageSize" @click="Y">
            <option value="2">==2==</option>
            <option value="5">==3==</option>
            <option value="3">==5==</option>
        </select>
        <input type="text" v-model="Page.PageIndex">
        <input type="button" value="跳转" @click="T"> <br>
        <a href="/Add">添加用户信息</a>
    </div>
</template>

<script setup lang="ts">
    import { ref,onMounted } from 'vue';
    import axios from 'axios';
    import { useRoute,useRouter } from 'vue-router';
    const route = useRoute()
    const router = useRouter()
    const data = ref([{
    "Id": 1,
    "Name": "",
    "Phone": "",
    "TypeId": 0,
    "isDel": true,
    "img": "//",
    "State": true,
    "TypeName": ""
    }])
    const Page = ref({
        "PageIndex":1,
        "PageSize":2,
        "Name":"",
        "Phone":""
    })
    const Total = ref({
        "TotalCount":1,
        "TotalPage":1
    })
    const Fanye=(val:any)=>{
        if(val>=1&&val<=Total.value.TotalPage){
            Page.value.PageIndex = val
            Show()
        }
    }
    const Y=()=>{
        Show()
    }
    const T=()=>{
        Show()
    }
    const Upd=(vid:any)=>{
        router.push({path:"/Upd",query:{id:vid}})
    }
    const Del=(vid:any,stat:any)=>{
        if(!confirm('确认删除吗')){
            return
        }
        axios.get("https://localhost:7119/api/Store/UpdateDel",{params:{id:vid,sta:stat}}).then(res=>{
            if(res.data>0){
                alert('删除成功')
                Show()
            }
            else{
                alert('删除失败')
            }
        })
    }
    onMounted(()=>{
        Show()
    })
    const Show=()=>{
        axios.get("https://localhost:7119/api/Store/GetAllStore",{params:Page.value}).then(res=>{
            data.value = res.data.data
            Total.value.TotalCount = res.data.count
            Total.value.TotalPage = Math.ceil(Total.value.TotalCount/Page.value.PageSize)
        })
    }
</script>

<style scoped>

</style>